<template>
  <div
      class="diy_edit i_want_to_customize_it_edits page_i_want_to_customize_it"
      id="i_want_to_customize_it_edit"
  >
    <el-form
        :model="form"
        ref="ruleFormRef" 
		:rules="rules"
        label-width="auto"
        class="edit_i_want_to_customize_it_form"
        size="large"
    >
      <el-row class="row_e">
          <el-col v-if="$check_field('ger','order_number','/i_want_to_customize_it/view') || $check_field('add','order_number','/i_want_to_customize_it/view') || $check_field('set','order_number','/i_want_to_customize_it/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="订单号" prop="order_number">
                      <el-input id="order_number" v-model="form['order_number']" placeholder="请输入订单号"
                      v-if="(form['i_want_to_customize_it_id'] && $check_field('set','order_number','/i_want_to_customize_it/view')) || (!form['i_want_to_customize_it_id'] && $check_field('add','order_number','/i_want_to_customize_it/view'))" :disabled="true"></el-input>
            <div v-else-if="$check_field('ger','order_number','/i_want_to_customize_it/view')">{{form['order_number']}}</div>
                    </el-form-item>
        </el-col>
            <el-col v-if="$check_field('ger','product_number','/i_want_to_customize_it/view') || $check_field('add','product_number','/i_want_to_customize_it/view') || $check_field('set','product_number','/i_want_to_customize_it/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="商品编号" prop="product_number">
                      <el-input id="product_number" v-model="form['product_number']" placeholder="请输入商品编号"
                      v-if="(form['i_want_to_customize_it_id'] && $check_field('set','product_number','/i_want_to_customize_it/view')) || (!form['i_want_to_customize_it_id'] && $check_field('add','product_number','/i_want_to_customize_it/view'))" :disabled="disabledObj['product_number_isDisabled']"></el-input>
            <div v-else-if="$check_field('ger','product_number','/i_want_to_customize_it/view')">{{form['product_number']}}</div>
                    </el-form-item>
        </el-col>
            <el-col v-if="$check_field('ger','product_name','/i_want_to_customize_it/view') || $check_field('add','product_name','/i_want_to_customize_it/view') || $check_field('set','product_name','/i_want_to_customize_it/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="商品名称" prop="product_name">
                      <el-input id="product_name" v-model="form['product_name']" placeholder="请输入商品名称"
                      v-if="(form['i_want_to_customize_it_id'] && $check_field('set','product_name','/i_want_to_customize_it/view')) || (!form['i_want_to_customize_it_id'] && $check_field('add','product_name','/i_want_to_customize_it/view'))" :disabled="disabledObj['product_name_isDisabled']"></el-input>
            <div v-else-if="$check_field('ger','product_name','/i_want_to_customize_it/view')">{{form['product_name']}}</div>
                    </el-form-item>
        </el-col>
            <el-col v-if="$check_field('ger','product_cover','/i_want_to_customize_it/view') || $check_field('add','product_cover','/i_want_to_customize_it/view') || $check_field('set','product_cover','/i_want_to_customize_it/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="商品封面" prop="product_cover">
                <el-upload :disabled="disabledObj['product_cover_isDisabled']" class="avatar-uploader" drag
                       accept="image/gif, image/jpeg, image/png, image/jpg" action="" :http-request="upload_product_cover"
                       :show-file-list="false" v-if="(form['i_want_to_customize_it_id'] && $check_field('set','product_cover','/i_want_to_customize_it/view')) || (!form['i_want_to_customize_it_id'] && $check_field('add','product_cover','/i_want_to_customize_it/view'))">
              <img id="product_cover" v-if="form['product_cover']" :src="$fullUrl($banseUrl,form['product_cover'])" class="avatar">
              <el-icon v-else><Plus /></el-icon>
            </el-upload>
            <el-image v-else-if="$check_field('ger','product_cover','/i_want_to_customize_it/view')" style="width: 100px; height: 100px"
                      :src="$fullUrl(form['product_cover'])" :preview-src-list="[$fullUrl(form['product_cover'])]">
              <div slot="error" class="image-slot">
                <img src="../../assets/images/user.png" style="width: 90px; height: 90px" />
              </div>
            </el-image>
              </el-form-item>
        </el-col>
            <el-col v-if="$check_field('ger','production_date','/i_want_to_customize_it/view') || $check_field('add','production_date','/i_want_to_customize_it/view') || $check_field('set','production_date','/i_want_to_customize_it/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="生产日期" prop="production_date">
                <el-date-picker :disabled="disabledObj['production_date_isDisabled']" v-if="(form['i_want_to_customize_it_id'] && $check_field('set','production_date','/i_want_to_customize_it/view')) || (!form['i_want_to_customize_it_id'] && $check_field('add','production_date','/i_want_to_customize_it/view'))" id="production_date"
                            v-model="form['production_date']" type="date" placeholder="选择日期">
            </el-date-picker>
            <div v-else-if="$check_field('ger','production_date','/i_want_to_customize_it/view')">{{form['production_date']}}</div>
              </el-form-item>
        </el-col>
            <el-col v-if="$check_field('ger','shelf_life','/i_want_to_customize_it/view') || $check_field('add','shelf_life','/i_want_to_customize_it/view') || $check_field('set','shelf_life','/i_want_to_customize_it/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="保质时间" prop="shelf_life">
                <el-date-picker :disabled="disabledObj['shelf_life_isDisabled']" v-if="(form['i_want_to_customize_it_id'] && $check_field('set','shelf_life','/i_want_to_customize_it/view')) || (!form['i_want_to_customize_it_id'] && $check_field('add','shelf_life','/i_want_to_customize_it/view'))" id="shelf_life"
                            v-model="form['shelf_life']" type="datetime" placeholder="选择日期时间">
            </el-date-picker>
            <div v-else-if="$check_field('ger','shelf_life','/i_want_to_customize_it/view')">{{form['shelf_life']}}</div>
              </el-form-item>
        </el-col>
            <el-col v-if="$check_field('ger','merchant_users','/i_want_to_customize_it/view') || $check_field('add','merchant_users','/i_want_to_customize_it/view') || $check_field('set','merchant_users','/i_want_to_customize_it/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="商家用户" prop="merchant_users">
                      <el-select v-if="(form['i_want_to_customize_it_id'] && $check_field('set','merchant_users','/i_want_to_customize_it/view')) || (!form['i_want_to_customize_it_id'] && $check_field('add','merchant_users','/i_want_to_customize_it/view'))" id="merchant_users" v-model="form['merchant_users']" :disabled="disabledObj['merchant_users_isDisabled']">
              <el-option v-for="o in list_user_merchant_users" :key="o['username']" :label="o['nickname'] + '-' + o['username']"
                         :value="o['user_id']">
              </el-option>
            </el-select>
            <el-select v-else-if="$check_field('ger','merchant_users','/i_want_to_customize_it/view')" id="merchant_users" v-model="form['merchant_users']" :disabled="true">
              <el-option v-for="o in list_user_merchant_users" :key="o['username']" :label="o['nickname'] + '-' + o['username']"
                         :value="o['user_id']">
              </el-option>
            </el-select>
                          </el-form-item>
        </el-col>
            <el-col v-if="$check_field('ger','customized_pricing','/i_want_to_customize_it/view') || $check_field('add','customized_pricing','/i_want_to_customize_it/view') || $check_field('set','customized_pricing','/i_want_to_customize_it/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="定制价格" prop="customized_pricing">
                      <el-input id="customized_pricing" v-model="form['customized_pricing']" placeholder="请输入定制价格"
                      v-if="(form['i_want_to_customize_it_id'] && $check_field('set','customized_pricing','/i_want_to_customize_it/view')) || (!form['i_want_to_customize_it_id'] && $check_field('add','customized_pricing','/i_want_to_customize_it/view'))" :disabled="disabledObj['customized_pricing_isDisabled']"></el-input>
            <div v-else-if="$check_field('ger','customized_pricing','/i_want_to_customize_it/view')">{{form['customized_pricing']}}</div>
                    </el-form-item>
        </el-col>
            <el-col v-if="$check_field('ger','album','/i_want_to_customize_it/view') || $check_field('add','album','/i_want_to_customize_it/view') || $check_field('set','album','/i_want_to_customize_it/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="商品相册" prop="album">
                      <el-input id="album" v-model="form['album']" placeholder="请输入商品相册"
                      v-if="(form['i_want_to_customize_it_id'] && $check_field('set','album','/i_want_to_customize_it/view')) || (!form['i_want_to_customize_it_id'] && $check_field('add','album','/i_want_to_customize_it/view'))" :disabled="disabledObj['album_isDisabled']"></el-input>
            <div v-else-if="$check_field('ger','album','/i_want_to_customize_it/view')">{{form['album']}}</div>
                    </el-form-item>
        </el-col>
            <el-col v-if="$check_field('ger','purchase_quantity','/i_want_to_customize_it/view') || $check_field('add','purchase_quantity','/i_want_to_customize_it/view') || $check_field('set','purchase_quantity','/i_want_to_customize_it/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="购买数量" prop="purchase_quantity">
                <el-input-number id="purchase_quantity" v-model.number="form['purchase_quantity']"
                             v-if="(form['i_want_to_customize_it_id'] && $check_field('set','purchase_quantity','/i_want_to_customize_it/view')) || (!form['i_want_to_customize_it_id'] && $check_field('add','purchase_quantity','/i_want_to_customize_it/view'))" :disabled="disabledObj['purchase_quantity_isDisabled']"></el-input-number>
            <div v-else-if="$check_field('ger','purchase_quantity','/i_want_to_customize_it/view')">{{form['purchase_quantity']}}</div>
              </el-form-item>
        </el-col>
            <el-col v-if="$check_field('ger','total_price','/i_want_to_customize_it/view') || $check_field('add','total_price','/i_want_to_customize_it/view') || $check_field('set','total_price','/i_want_to_customize_it/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="总价格" prop="total_price">
                      <el-input id="total_price" v-model="form['total_price']" placeholder="请输入总价格"
                      v-if="(form['i_want_to_customize_it_id'] && $check_field('set','total_price','/i_want_to_customize_it/view')) || (!form['i_want_to_customize_it_id'] && $check_field('add','total_price','/i_want_to_customize_it/view'))"  @focus="set_total_price()" :disabled="disabledObj['total_price_isDisabled']"></el-input>
            <div v-else-if="$check_field('ger','total_price','/i_want_to_customize_it/view')">{{form['total_price']}}</div>
                    </el-form-item>
        </el-col>
            <el-col v-if="$check_field('ger','customized_users','/i_want_to_customize_it/view') || $check_field('add','customized_users','/i_want_to_customize_it/view') || $check_field('set','customized_users','/i_want_to_customize_it/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="定制用户" prop="customized_users">
                              <div v-if="user_group !== '管理员'">
              {{ get_user_session_customized_users(form['customized_users']) }}
              <el-select v-if="(form['i_want_to_customize_it_id'] && $check_field('set','customized_users','/i_want_to_customize_it/view')) || (!form['i_want_to_customize_it_id'] && $check_field('add','customized_users','/i_want_to_customize_it/view'))" id="customized_users" v-model="form['customized_users']" :disabled="disabledObj['customized_users_isDisabled']">
                <el-option v-for="o in list_user_customized_users" :key="o['username']" :label="o['nickname'] + '-' + o['username']"
                           :value="o['user_id']">
                </el-option>
              </el-select>
              <el-select v-else-if="$check_field('ger','customized_users','/i_want_to_customize_it/view')" id="customized_users" v-model="form['customized_users']" :disabled="true">
                <el-option v-for="o in list_user_customized_users" :key="o['username']" :label="o['nickname'] + '-' + o['username']"
                           :value="o['user_id']">
                </el-option>
              </el-select>
            </div>
            <el-select v-else id="customized_users" v-model="form['customized_users']" :disabled="disabledObj['customized_users_isDisabled']">
              <el-option v-for="o in list_user_customized_users" :key="o['username']" :label="o['nickname'] + '-' + o['username']"
                         :value="o['user_id']">
              </el-option>
            </el-select>
                                  </el-form-item>
        </el-col>
            <el-col v-if="$check_field('ger','user_name','/i_want_to_customize_it/view') || $check_field('add','user_name','/i_want_to_customize_it/view') || $check_field('set','user_name','/i_want_to_customize_it/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="用户姓名" prop="user_name">
                      <el-input id="user_name" v-model="form['user_name']" placeholder="请输入用户姓名"
                      v-if="(form['i_want_to_customize_it_id'] && $check_field('set','user_name','/i_want_to_customize_it/view')) || (!form['i_want_to_customize_it_id'] && $check_field('add','user_name','/i_want_to_customize_it/view'))" :disabled="disabledObj['user_name_isDisabled']"></el-input>
            <div v-else-if="$check_field('ger','user_name','/i_want_to_customize_it/view')">{{form['user_name']}}</div>
                    </el-form-item>
        </el-col>
            <el-col v-if="$check_field('ger','customized_attachments','/i_want_to_customize_it/view') || $check_field('add','customized_attachments','/i_want_to_customize_it/view') || $check_field('set','customized_attachments','/i_want_to_customize_it/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="定制附件" prop="customized_attachments">
                      <div v-if="disabledObj['customized_attachments_isDisabled']">
              <div v-if="$check_field('ger','customized_attachments','/i_want_to_customize_it/view')">
                <el-button type="primary" @click="$download($fullUrl(form['customized_attachments']),form['customized_attachments'])">下载<i
                        class="el-icon-download el-icon--right"></i></el-button>
              </div>
            </div>
            <div v-else>
              <el-upload v-if="(form['i_want_to_customize_it_id'] && $check_field('set','customized_attachments','/i_want_to_customize_it/view')) || (!form['i_want_to_customize_it_id'] && $check_field('add','customized_attachments','/i_want_to_customize_it/view'))" class="upload-demo" drag
                         action="" style="max-width: 300px;width: 100%;" :http-request="upload_customized_attachments" accept="">
                <el-icon><Plus /></el-icon>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>
              <div v-else-if="$check_field('ger','customized_attachments','/i_want_to_customize_it/view')">
                <el-button type="primary" @click="$download($fullUrl($banseUrl,form['customized_attachments']),form['customized_attachments'])">下载<i
                        class="el-icon-download el-icon--right"></i></el-button>
              </div>
            </div>
                    </el-form-item>
        </el-col>
            <el-col v-if="$check_field('ger','delivery_date','/i_want_to_customize_it/view') || $check_field('add','delivery_date','/i_want_to_customize_it/view') || $check_field('set','delivery_date','/i_want_to_customize_it/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="交付日期" prop="delivery_date">
                <el-date-picker :disabled="disabledObj['delivery_date_isDisabled']" v-if="(form['i_want_to_customize_it_id'] && $check_field('set','delivery_date','/i_want_to_customize_it/view')) || (!form['i_want_to_customize_it_id'] && $check_field('add','delivery_date','/i_want_to_customize_it/view'))" id="delivery_date"
                            v-model="form['delivery_date']" type="date" placeholder="选择日期">
            </el-date-picker>
            <div v-else-if="$check_field('ger','delivery_date','/i_want_to_customize_it/view')">{{form['delivery_date']}}</div>
              </el-form-item>
        </el-col>
            <el-col v-if="$check_field('ger','customized_audio','/i_want_to_customize_it/view') || $check_field('add','customized_audio','/i_want_to_customize_it/view') || $check_field('set','customized_audio','/i_want_to_customize_it/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="定制音频" prop="customized_audio">
                      <el-upload v-if="(form['i_want_to_customize_it_id'] && $check_field('set','customized_audio','/i_want_to_customize_it/view')) || (!form['i_want_to_customize_it_id'] && $check_field('add','customized_audio','/i_want_to_customize_it/view'))" class="upload-demo" drag
                       action="" style="max-width: 300px;width: 100%;" :http-request="upload_customized_audio" accept="audio/ogg,audio/mp3,audio/wav">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将音频拖到此处，或<em>点击上传</em></div>
            </el-upload>
            <div v-else-if="$check_field('ger','customized_audio','/i_want_to_customize_it/view')">
              <el-button type="primary" @click="download(form['customized_audio'])">下载<i
                      class="el-icon-download el-icon--right"></i></el-button>
            </div>
                    </el-form-item>
        </el-col>
            <el-col v-if="$check_field('ger','customized_videos','/i_want_to_customize_it/view') || $check_field('add','customized_videos','/i_want_to_customize_it/view') || $check_field('set','customized_videos','/i_want_to_customize_it/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="定制视频" prop="customized_videos">
                      <el-upload v-if="(form['i_want_to_customize_it_id'] && $check_field('set','customized_videos','/i_want_to_customize_it/view')) || (!form['i_want_to_customize_it_id'] && $check_field('add','customized_videos','/i_want_to_customize_it/view'))" class="upload-demo" drag
                       action="" style="max-width: 300px;width: 100%;" :http-request="upload_customized_videos" accept="video/ogg,video/mp4,video/webm">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将视频拖到此处，或<em>点击上传</em></div>
            </el-upload>
            <div v-else-if="$check_field('ger','customized_videos','/i_want_to_customize_it/view')">
              <el-button type="primary" @click="download(form['customized_videos'])">下载<i
                      class="el-icon-download el-icon--right"></i></el-button>
            </div>
                    </el-form-item>
        </el-col>
            <el-col v-if="$check_field('ger','customized_images','/i_want_to_customize_it/view') || $check_field('add','customized_images','/i_want_to_customize_it/view') || $check_field('set','customized_images','/i_want_to_customize_it/view')" :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
    <el-form-item label="定制图片" prop="customized_images">
                      <el-input id="customized_images" v-model="form['customized_images']" placeholder="请输入定制图片"
                      v-if="(form['i_want_to_customize_it_id'] && $check_field('set','customized_images','/i_want_to_customize_it/view')) || (!form['i_want_to_customize_it_id'] && $check_field('add','customized_images','/i_want_to_customize_it/view'))" :disabled="disabledObj['customized_images_isDisabled']"></el-input>
            <div v-else-if="$check_field('ger','customized_images','/i_want_to_customize_it/view')">{{form['customized_images']}}</div>
                    </el-form-item>
        </el-col>
          <el-col :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
          <el-form-item label="审核状态" prop="examine_state">
            <el-select id="examine_state" v-model="form['examine_state']"
                       v-if="(form['examine_state'] && $check_option('/i_want_to_customize_it/table','examine')) || (!form['examine_state'] && $check_option('/i_want_to_customize_it/table','examine'))">
              <el-option key="未审核" label="未审核" value="未审核"></el-option>
              <el-option key="已通过" label="已通过" value="已通过"></el-option>
              <el-option key="未通过" label="未通过" value="未通过"></el-option>
            </el-select>
            <div v-else>{{form["examine_state"]}}</div>
          </el-form-item>
        </el-col>

            <el-col :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
            <el-form-item label="审核回复" prop="examine_reply">
              <el-input id="examine_reply" v-model="form['examine_reply']" placeholder="请输入审核回复"
                        v-if="(form['examine_reply'] && $check_option('/i_want_to_customize_it/table','examine')) || (!form['examine_reply'] && $check_option('/i_want_to_customize_it/table','examine'))"></el-input>
              <div v-else>{{form["examine_reply"]}}</div>
            </el-form-item>
        </el-col>
            <el-col :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
            <el-form-item label="选座" prop="seat">
              <div class="seat-wrapper">
                <div class="illustration">
                  <div class="illustration-img-wrapper unselected-seat"></div>
                  <span class="illustration-text">可选</span>
                  <div class="illustration-img-wrapper selected-seat"></div>
                  <span class="illustration-text">已选</span>
                  <div class="illustration-img-wrapper bought-seat"></div>
                  <span class="illustration-text">不可选</span>
                  <div class="btn-buy" @click="buySeat">选定座位</div>
                </div>
                <div class="inner-seat-wrapper" ref="innerSeatWrapper">
                  <div v-for="row in seatRow">
                    <!--这里的v-if很重要，如果没有则会导致报错，因为seatArray初始状态为空-->
                    <div
                        v-for="col in seatCol"
                        v-if="seatArray.length > 0"
                        class="seat"
                        :style="{ width: seatSize + 'px', height: seatSize + 'px' }"
                    >
                      <div
                          class="inner-seat"
                          @click="handleChooseSeat(row - 1, col - 1)"
                          v-if="seatArray[row - 1][col - 1] !== -1"
                          :class="
                              seatArray[row - 1][col - 1] === 2
                                ? 'bought-seat'
                                : seatArray[row - 1][col - 1] === 1
                                ? 'selected-seat'
                                : 'unselected-seat'
                            "
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
        </el-col>
      </el-row>
      <div v-if="$check_action('/i_want_to_customize_it/view','set') || $check_action('/i_want_to_customize_it/view','add') || $check_option('/i_want_to_customize_it/table','examine')" class="footer">
        <el-button type="primary" @click="onSubmit" size="large">提交</el-button>
        <el-button @click="cancel()" size="large">取消</el-button>
      </div>
      <div v-else class="footer">
        <el-button @click="cancel()" size="large">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
  import {ElMessage} from "element-plus";
  import {ref, onMounted} from "vue";
  import { $post, $get } from "@/api/Api.js";
  import storageHelper from "@/libs/StorageHelper";
  import {useStore} from "vuex";
  import { useRouter, useRoute } from "vue-router";
  import {
          $check_field,
          $fullUrl,
          $banseUrl,
          $check_action,
          $getUrlParams,
          filterSensitiveWords,
          $get_stamp,
          $get_rand,
          $toTime,
          $push
  } from "@/utils/utils.js";

  let router = useRouter();
  let route = useRoute();
  let store = useStore();
  let token = storageHelper.getToken() || null;
  let UserInfo = storageHelper.getUserInfo();
  let user_id = storageHelper.getUserInfo().user_id;
  let user_group = storageHelper.getUserInfo().user_group;
  let i_want_to_customize_it_id = $getUrlParams().i_want_to_customize_it_id;
  let url_add = ref("/api/i_want_to_customize_it/add");
  let url_set = ref("/api/i_want_to_customize_it/set");
  let field = ref("i_want_to_customize_it_id")
  let url_get_obj = ref("/api/i_want_to_customize_it/get_obj");
  let url_upload = ref("/api/i_want_to_customize_it/upload");
  let ruleFormRef = ref(null);
  
  let rules = ref({
																		  });

  let disabledObj = ref({
      "order_number_isDisabled": false,
        "product_number_isDisabled": false,
        "product_name_isDisabled": false,
        "product_cover_isDisabled": false,
        "production_date_isDisabled": false,
        "shelf_life_isDisabled": false,
        "merchant_users_isDisabled": false,
        "customized_pricing_isDisabled": false,
        "album_isDisabled": false,
        "purchase_quantity_isDisabled": false,
        "total_price_isDisabled": false,
        "customized_users_isDisabled": false,
        "user_name_isDisabled": false,
        "customized_attachments_isDisabled": false,
        "delivery_date_isDisabled": false,
        "customized_audio_isDisabled": false,
        "customized_videos_isDisabled": false,
        "customized_images_isDisabled": false,
    });
  let form = ref({
    "order_number": $get_stamp(), // 订单号
      "product_number":  '', // 商品编号
      "product_name":  '', // 商品名称
      "product_cover":  '', // 商品封面
      "production_date":  '', // 生产日期
      "shelf_life":  '', // 保质时间
        "merchant_users": 0, // 商家用户
      "customized_pricing":  '', // 定制价格
      "album":  '', // 商品相册
      "purchase_quantity":  0, // 购买数量
      "total_price":  '', // 总价格
        "customized_users": 0, // 定制用户
      "user_name":  '', // 用户姓名
      "customized_attachments":  '', // 定制附件
      "delivery_date":  '', // 交付日期
      "customized_audio":  '', // 定制音频
      "customized_videos":  '', // 定制视频
      "customized_images":  '', // 定制图片
      "examine_state": "未审核",
    "examine_reply": "",
    "i_want_to_customize_it_id": 0, // ID
    "seat": "", // 座位
  });
    let seatArr = ref([]); // 影院座位的二维数组,-1为非座位，0为未购座位，1为已选座位(绿色),2为已购座位(红色)
    let seatRow = ref([]); //影院座位行数
    let seatCol = ref([]); //影院座位列数
    let seatSize = ref([]); //座位尺寸
    let seatArray = ref([]);
    let list_ = ref([]);
    let seatList = ref("");
  
    
    
    
    
    
    
    // 用户列表
  let list_user_merchant_users = ref([]);
          
    
    
    
    
    // 用户列表
  let list_user_customized_users = ref([]);
        // 用户组
  let group_user_customized_users=ref({});
          
    
    
    
    
    
                                                                          /**
     * 上传商品封面
     * @param {Object} param 文件参数
     */
    let upload_product_cover=(param) =>{
        uploadFile(param.file, "product_cover");
    }
                                                                                    //获取商家用户用户列表
    let get_list_user_merchant_users = async () => {
      let json = await $get("/api/user/get_list?user_group=商家用户");
      if (json.result) {
        list_user_merchant_users.value = json.result.list;
      } else if (json.error) {
        console.error(json.error);
      }
    }
                                                                                                                        let set_total_price = () => {
        form.value.total_price = parseFloat(form.value.customized_pricing) * parseFloat(form.value.purchase_quantity)
    };
                                            //获取注册用户用户列表
    let get_list_user_customized_users = async () => {
      let json = await $get("/api/user/get_list?user_group=注册用户");
      if (json.result) {
        list_user_customized_users.value = json.result.list;
      } else if (json.error) {
        console.error(json.error);
      }
    }
            //获取商城卖家用户组
    let get_group_user_customized_users = async () => {
      let json = await $get("/api/user_group/get_obj?name=注册用户");
      if (json.result) {
        group_user_customized_users.value = json.result.obj;
      } else if (json.error) {
        console.error(json.error);
      }
    }
    //获取
    let get_user_session_customized_users = (id) => {
      let user_id = { user_id: id };
      let source_table = group_user_customized_users.value.source_table
      if (source_table) {
        let url = "/api/" + source_table + "/get_obj"
        $get(url, {user_id: user_id}).then((res) => {
          if (res.result && res.result.obj) {
            var arr = []
            for (let key in res.result.obj) {
              arr.push(key)
            }
            var arrForm = []
            for (let key in form.value) {
              arrForm.push(key)
            }
            form.value["customized_users"] = id
            disabledObj.value['customized_users' + '_isDisabled'] = true
            for (var i = 0; i < arr.length; i++) {
              if (arr[i] !== 'examine_state' && arr[i] !== 'examine_reply') {
                for (var j = 0; j < arrForm.length; j++) {
                  if (arr[i] === arrForm[j]) {
                    if (arr[i] !== "customized_users") {
                      form.value[arrForm[j]] = res.result.obj[arr[i]]
                      disabledObj.value[arrForm[j] + '_isDisabled'] = true
                      break;
                    } else {
                      disabledObj.value[arrForm[j] + '_isDisabled'] = true
                    }
                  }
                }
              }
            }
          }
        });
      }
    }
                                                /**
     * 上传定制附件
     * @param {Object} param 文件参数
     */
    let upload_customized_attachments=(param) =>{
        uploadFile(param.file, "customized_attachments");
    }
                                                        /**
     * 上传定制音频
     * @param {Object} param 文件参数
     */
    let upload_customized_audio=(param) =>{
        uploadFile(param.file, "customized_audio");
    }
                                    /**
     * 上传定制视频
     * @param {Object} param 文件参数
     */
    let upload_customized_videos=(param) =>{
        uploadFile(param.file, "customized_videos");
    }
                                                /**
    * 上传封面图
    * @param {Object} file 文件对象
    * @param {key} 保存键名
    */
    const uploadFile = (file, key = "img") => {
        var formobj = new FormData(); // FormData 对象
        formobj.append("file", file); // 文件对象
              $upload(url_upload.value, formobj, function (json) {
          if (json.result) {
            form.value[key] = json.result.url;
          } else {
            ElMessage.error("上传失败！");
          }
        });
    };
    /**
     * 上传文件
     * @param {String} url 请求地址
     * @param {Object} body 请求参数
     * @param {Funciton} func 回调函数，可以为空，为空则采用await返回值
     * @return {Object} 返回请求结果
     */
    let $upload = async (url, body, func) => {
      url = url.replace("~/", $banseUrl);

      if (func) {
        // 如果回调函数存在, 则采用异步
              $post(url, body, {
          headers: {
            "x-auth-token": token,
            "Content-Type": "multipart/form-data",
          },
        })
            .then((res) => {
              func(res);
            })
            .catch((res) => {
              func(res);
            });
      } else {
        // 否则采用同步
        var res = await $post(url, body, {
          headers: {
            "x-auth-token": token,
            "Content-Type": "multipart/form-data",
          },
        });
        return res;
      }
    };
    // 选座
    //选定且购买座位
    let buySeat = () => {
      //遍历seatArray，将值为1的座位变为2
      let oldArray = seatArray.value.slice();
      for (let i = 0; i < seatRow.value; i++) {
        for (let j = 0; j < seatCol.value; j++) {
          if (oldArray[i][j] === 1) {
            oldArray[i][j] = 2;
          }
        }
      }
      seatArray.value = oldArray;
      let string = "";
      for (let x = 0; x < oldArray.length; x++) {
        let array = oldArray[x];
        for (let j = 0; j < array.length; j++) {
          if (oldArray[x][j] === 2) {
            if (string == "") {
              string = "" + (x * 8 + j);
            } else {
              string = string + "," + (x * 8 + j);
            }
          }
        }
      }
      // 对比判断哪些是新增的座位
      if (form.value.seat == undefined) {
        form.value.seat = "";
      }

      let seat = form.value.seat;
      let seatB = "";
      if (string != "" && string != null) {
        let stringList = string.split(",");
        let seatListNewArr = seatList.value;
        if (seatListNewArr.length != 0) {
          let seatListArr = seatListNewArr.split(",");
          for (let v = 0; v < stringList.length; v++) {
            if (
                seatListArr.indexOf(stringList[v]) == -1 &&
                seat.indexOf(stringList[v]) == -1
            ) {
              if (seat == "" || seat == null) {
                seat = stringList[v] + "";
                seatB = seat;
              } else {
                if (seat.indexOf(stringList[v]) == -1) {
                  seat = seat + "," + stringList[v];
                  if (seatB == "" || seatB == null) {
                    seatB = stringList[v];
                  } else {
                    seatB = seatB + "," + stringList[v];
                  }
                }
              }
            }
          }
        } else {
          seat = string;
        }
      }

      if (form.value.seat == "") {
        form.value.seat = seat;
      } else {
        if (seatB != "") {
          form.value.seat = form.value.seat + "," + seatB;
        }
      }
      seatList.value = string;
    };
    //处理座位选择逻辑
    let handleChooseSeat = (row, col) => {
      let seatValue = seatArray.value[row][col];
      let newArray = seatArray.value;
      //如果是已购座位，直接返回
      if (seatValue === 2) return;
      //如果是已选座位点击后变未选
      if (seatValue === 1) {
        newArray[row][col] = 0;
      } else if (seatValue === 0) {
        newArray[row][col] = 1;
      }
      //必须整体更新二维数组，Vue无法检测到数组某一项更新,必须slice复制一个数组才行
      seatArray.value = newArray.slice();
    };
    let get_list = async () => {
      var json = await $get("/api/i_want_to_customize/get_list", {
        product_number: form.value.product_number,
      });
      if (json.result && json.result.list) {
        list_.value = json.result.list;
      } else if (json.error) {
        console.error(json.error);
      }
      console.log(json);
      let list = json.result.list;
      if (list != null && list.length != 0) {
        let seatArr = "";
        for (let j = 0; j < list.length; j++) {
          let seat = list[j].seat;
          if (seat != null && seat != "") {
            if (seatArr == "") {
              seatArr = seat + "";
            } else {
              seatArr = seatArr + "," + seat;
            }
          }
        }
        seatList.value = seatArr;
      }
      console.log(seatList.value);
      initSeatArray(5, 8);
    };
    //初始座位数组
    let initSeatArray = (Col, Row) => {
      seatCol.value = Col;
      seatRow.value = Row;
      let seatListArr = seatList.value;
      let seatArrNew = seatListArr.split(",");
      if (seatListArr == "" || seatListArr == null) {
        seatArrNew = [];
      }
      seatArr.value = seatArrNew;

      let seatArrayNew = Array(seatRow.value)
          .fill(0)
          .map(() => Array(seatCol.value).fill(0));
      seatArray.value = seatArrayNew;
      console.log(seatArray.value);
      for (let j = 0; j < seatArrNew.length; j++) {
        let i = Math.floor(seatArrNew[j] / 8);
        let x = seatArrNew[j] % 8;
        seatArrayNew[i][x] = 2;
      }
      seatSize.value = 62;
    };
  //提交前验证事件
  let submit_check = () => {
                                      if (!param.production_date){
      return "生产日期不能为空";
    }
              if (!param.shelf_life){
      return "保质时间不能为空";
    }
                                                                              if (!param.delivery_date){
      return "交付日期不能为空";
    }
                                  };
  // 点击取消
  let cancel = () => {
    router.go(-1);
  };
  // 点击提交
  let onSubmit = async () => {
    let valid = await ruleFormRef.value.validate();
    if (valid) {
      // 提交表单
      if (i_want_to_customize_it_id) {
        // 编辑
        delete form.value.update_time;
              $post(url_set.value + "?i_want_to_customize_it_id=" + i_want_to_customize_it_id, form.value).then((res) => {
          if (res.result) {
          router.push("/home/i_want_to_customize_it/table");
          ElMessage.success("提交成功！");
          } else if (res.error) {
            ElMessage.error(res.error.message);
          }
        });

      } else {
        // 新增
              $post(url_add.value, form.value).then((res) => {
          if (res.result) {
              router.push("/home/i_want_to_customize_it/table");
              ElMessage.success("提交成功！");
          } else if (res.error) {
            ElMessage.error(res.error.message);
          }
        });

      }
    } else {
      ElMessage.error(msg);
    }
  };
  // 查询数组对象某个是否包含某个值,返回对应对象
  let getObj = (arr, val) => {
    let obj = arr.find((item) => item.user_id == val);
    let ret = "";
    if (obj) {
      if (obj.nickname) {
        ret = obj.nickname;
      } else {
        ret = obj.username;
      }
    }
    return ret;
  };
  //获取对象之前
  let get_obj_before = (param) => {
    var formArr = "";
                        // 获取缓存数据附加
        let formObj = JSON.parse(localStorage.getItem("form"));
        if (formObj) {
          form.value = $push(form.value, formObj);
          formArr = formObj;
        }
                        if(form.value && formArr){
      Object.keys(form.value).forEach(key => {
        Object.keys(formArr).forEach(dbKey => {
          if(key === dbKey){
            disabledObj.value[key+'_isDisabled'] = true;
          }
        })
      })
    }
                        if (form.value["production_date"] && isTimestamp(form.value["production_date"])) {
      form.value["production_date"] = $toTime(parseInt(form.value["production_date"]), "YYYY-MM-DD")
    }
        if (form.value["shelf_life"] && isTimestamp(form.value["shelf_life"])) {
      form.value["shelf_life"] = $toTime(parseInt(form.value["shelf_life"]), "YYYY-MM-DD HH:mm:ss")
    }
                                            if (form.value["delivery_date"] && isTimestamp(form.value["delivery_date"])) {
      form.value["delivery_date"] = $toTime(parseInt(form.value["delivery_date"]), "YYYY-MM-DD")
    }
                  localStorage.removeItem('form')
    get_list()
    return param;
  }
  // js判断字段是否是时间戳格式
  let isTimestamp = (value) => {
    return /^\d{10}$/.test(value) || /^\d{13}$/.test(value);
  }
  //获取对象之后
  let get_obj_after = (json, func) => {
                                                                                                                                              if (form.value["production_date"] == "0000-00-00") {
            form.value["production_date"] = null;
          }
          if (parseInt(form.value["production_date"]) > 9999) {
            form.value["production_date"] = $toTime(parseInt(form.value["production_date"]), "YYYY-MM-DD")
          }
                                      if (form.value["shelf_life"] == "0000-00-00 00:00:00") {
            form.value["shelf_life"] = null;
          }
          if (parseInt(form.value["shelf_life"]) > 9999) {
            form.value["shelf_life"] = $toTime(parseInt(form.value["shelf_life"]), "YYYY-MM-DD HH:mm:ss")
          }
                                                                                                                                                                                                                                                                                      if (form.value["delivery_date"] == "0000-00-00") {
            form.value["delivery_date"] = null;
          }
          if (parseInt(form.value["delivery_date"]) > 9999) {
            form.value["delivery_date"] = $toTime(parseInt(form.value["delivery_date"]), "YYYY-MM-DD")
          }
                                                                                                                get_list();
  }
  let is_view = () => {
    var bl = user_group == "管理员";
    if (!bl) {
      bl = $check_action('/i_want_to_customize_it/table', 'add');
      console.log(bl ? "你有表格添加权限视作有添加权限" : "你没有表格添加权限");
    }
    if (!bl) {
      bl = $check_action('/i_want_to_customize_it/table', 'set');
      console.log(bl ? "你有表格添加权限视作有修改权限" : "你没有表格修改权限");
    }
    if (!bl) {
      bl = $check_action('/i_want_to_customize_it/view', 'add');
      console.log(bl ? "你有视图添加权限视作有添加权限" : "你没有视图添加权限");
    }
    if (!bl) {
      bl = $check_action('/i_want_to_customize_it/view', 'set');
      console.log(bl ? "你有视图修改权限视作有修改权限" : "你没有视图修改权限");
    }
    if (!bl) {
      bl = $check_action('/i_want_to_customize_it/view', 'get');
      console.log(bl ? "你有视图查询权限视作有查询权限" : "你没有视图查询权限");
    }
    console.log(bl ? "具有当前页面的查看权，请注意这不代表你有字段的查看权" : "无权查看当前页，请注意即便有字段查询权限没有页面查询权限也不行");
    return bl;
  }
  // 获取详情
  let get_i_want_to_customize_it_obj = async () => {
    let list = await $get("/api/i_want_to_customize_it/get_obj?i_want_to_customize_it_id=" + i_want_to_customize_it_id);
    form.value = list.result.obj;
    get_obj_after();
  };
  onMounted(() => {
                                get_list_user_merchant_users();
                                get_list_user_customized_users();
          get_group_user_customized_users();
                                    if (i_want_to_customize_it_id) {
      get_i_want_to_customize_it_obj();
    }else {
      get_obj_before();
      get_obj_after();
    }

  });
</script>

<style scoped lang="less">
  .diy_edit {
    width: 100%;

    .edit_i_want_to_customize_it_form {
      max-width: 80%;
      margin: 90px auto;

      .fn {
        width: 100%;
      }
    }

    img {
      width: 100px;
      height: 100px;
    }

    .edit_list_i_want_to_customize_it_sell {
      width: 80%;
      margin: 90px auto;
    }

    .footer {
      text-align: center;
    }
  }
    .seat-wrapper {
      height: 370px;
      width: 500px;
      border: 1px dotted #c5c5c5;
      /* margin: 0 auto; */
      position: relative;
      overflow: hidden;
    }

    .inner-seat-wrapper {
      position: absolute;
      bottom: 0;
      width: 100%;
      box-sizing: border-box;
    }
    .seat {
      float: left;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 60px;
      height: 60px;
    }
    .inner-seat {
      width: 80%;
      height: 80%;
      cursor: pointer;
    }

    .btn-wrapper {
      margin: 20px auto;
      width: 1000px;
      height: 30px;
      text-align: center;
    }

    .btn-buy {
      height: 100%;
      line-height: 35px;
      font-size: 15px;
      border-radius: 5px;
      padding: 0 5px;
      background-color: #ffa349;
      color: #ffffff;
      display: inline-block;
      cursor: pointer;
      margin: 5px;
    }

    .illustration {
      position: absolute;
      left: 10px;
      top: 20px;
      height: 35px;
      width: 300px;
    }

    .illustration-img-wrapper {
      width: 25px;
      height: 25px;
      position: relative;
      top: 50%;
      display: inline-block;
      transform: translateY(-50%);
      margin-left: 10px;
    }

    .illustration-text {
      display: inline-block;
      height: 100%;
      line-height: 35px;
      font-size: 14px;
      position: relative;
      top: -2px;
    }
    
        .selected-seat {
      background: url("../../../public/img/selected2.png") center center no-repeat;
      background-size: 100% 100%;
    }

    .unselected-seat {
      background: url("../../../public/img/unselected2.png") center center no-repeat;
      background-size: 100% 100%;
    }

    .bought-seat {
      background: url("../../../public/img/bought2.png") center center no-repeat;
      background-size: 100% 100%;
    }
    
    </style>
  